<template>
  <div class="common-layout">
    <el-card class="mainCard">
      <QuestionAnswer :answer="answer"/>
      <div class="question">
        <el-row :gutter="20">
          <el-col :span="22">
            <el-input
                v-model="questionText"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入问题喵~"
                class="input-with-select"
            >
            </el-input>
          </el-col>
          <el-col :span="2">
            <el-button :icon="Search" class="buttonStyle" type="primary" @click="postQuestion"/>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>


<script lang="js" setup>
import {reactive, ref} from 'vue'
import {Search} from '@element-plus/icons-vue'
import QuestionAnswer from "@/components/QuestionAnswer.vue";
import axios from "axios";

const questionText = ref('')
const chatStream = reactive({
  messages: [],
  stream: false,
  user_id: '',
});
const answer = reactive({
  role: '',
  content: '',
})
const postQuestion = () => {
  chatStream.messages.chatmessage.role = 'user';
  chatStream.messages.chatmessage.content = questionText.value;
  console.log(JSON.stringify(chatStream))
  axios.post('api/erniebot', JSON.stringify(chatStream))
      .then(function (response) {
        console.log(response)
        answer.content = response.data;
        answer.role = 'assistant';
      })
      .catch(function (error) {
        console.log(error);
      });
}
</script>

<style>
body {
  background-color: #e9e9eb;
}

.common-layout {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: 80%;
  justify-items: center;
}

.buttonStyle {
  width: 100%;
  height: 100%;
  min-height: 52px;
}

.mainCard {
  background-color: #E4E7ED;
  height: 99%;
  width: 100%;
}

.question {
  position: absolute;
  margin-left: 10px;
  margin-top: 20px;
  width: 95%;
}

</style>